/**
 * 图表基础类, 不可直接使用. 用于提供图表基本配置
 */

import React from 'react';
import { findDOMNode } from 'react-dom';
import merge from 'lodash/object/merge';
import isEqual from 'lodash/lang/isEqual'
import Highcharts from 'Highcharts';

export default class BaseChart extends React.Component {
	static propTypes = {
		// 主标题
		title: React.PropTypes.string,
		// 副标题
		subtitle: React.PropTypes.string,
		// Y轴标题
		yAxisTitle: React.PropTypes.string,
		// X轴类别
		categories: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
		// 数据
		series: React.PropTypes.arrayOf(React.PropTypes.shape({
			// 数据组名
			name: React.PropTypes.string,
			// 数据内容
			data: React.PropTypes.array
		})).isRequired
	};

	// 基本配置
	baseConfig = {};
	// 图表对象
	chart = null;
	// 唯一key
	key = 0;

	static defaultProps = {
		title: '基础图',
		subtitle: '请通过继承的方式实现需要的图表',
		yAxisTitle: '描述',
		canUpdate: true,
	};

	constructor(props, config) {
		super(props);

		this.baseConfig = merge({}, config);

		Highcharts.setOptions({
			lang: {
				loading: '正在加载数据...'
			}
		})
	}

	componentDidUpdate(prevProps, prevState) {
		// 尝试重绘图表
		let { title, subtitle, yAxisTitle, categories, series, height=400 } = this.props;
		let domNode = findDOMNode(this.refs['chartContainer']);
		// 合并默认配置和用户配置
		let config = merge({}, this.baseConfig, 
			{ 
				chart: {
					height,
					renderTo: domNode
				},
				title: { text: title }, 
				subtitle: { text: subtitle },
				yAxis: {
					title: {
						text: yAxisTitle
					}
				},
				// xAxis: {
				// 	categories,
				// },
				series: []
			});
		// 构建图表
		if (!this.chart) {
			this.chart = new Highcharts.Chart(config);
		}
		
		if (this.chart) {
			// TODO: 宽似乎不能控制, 与示例不符
			// http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-setsize-button/
			// let width = this.chart.chartWidth;
			// height = this.chart.chartHeight;
			// console.log(`set size: ${width} ${height}`)
			// this.chart.setSize(width, height);

			this.chart.showLoading();
			if (categories && categories.length > 0)
				this.chart.xAxis[0].setCategories(categories, false);
			if (series.length > 0) {
				series.forEach(function(item, index) {
					if (!this.chart.series[index])
						this.chart.addSeries(item, false);
					else
						this.chart.series[index].setData(item.data, false);
				}.bind(this));
			} else {
				this.chart.series.forEach(function(item) {
					item.setData({}, false);
				})
			}
			this.chart.reflow();
			this.chart.redraw();
			this.chart.hideLoading();
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		// 阻止刷新其他不可见图表
		let { canUpdate } = nextProps;

		canUpdate = canUpdate === undefined ? true : canUpdate;

		// 判断是否需要重绘图表
		return canUpdate 
			&& !(isEqual(this.props.categories, nextProps.categories)
			&& isEqual(this.props.series, nextProps.series))
			// && (nextProps.categories.length != 0 && nextProps.series.length != 0);
	}

	componentWillUnmount() {
		if (this.chart) {
			this.chart.destroy();
			this.chart = null;
		}
	}

	render() {
		return (
			<div ref='chartContainer'>
			</div>
		)
	}
}